<!-- 桌台：搭台的弹窗组件 -->
<template>
  <CustomDialog
    v-model:visible="dialogVisible"
    top="5vh"
    width="590px"
    curent-class="share-desktop-dialog"
  >
    <div class="dialog-box">
      <div class="title">搭台</div>
      <div class="desktop-form-box">
        <!-- 表单区域 -->
        <div class="form-input-box">
          <div class="form-item">
            <div class="desc">人数</div>
            <div class="dialog-input">
              <input
                class="input"
                v-model.trim="peopleKeyword"
                type="text"
                placeholder="请输入人数"
                @focus="handleInputFocus"
                @input="handleInput"
                @keydown.enter="onConfirm"
              />
              <el-icon v-if="peopleKeyword" class="clear-icon" @click="handleClearInput">
                <CircleClose />
              </el-icon>
            </div>
          </div>
        </div>

        <!-- 数字键盘组件 -->
        <div class="number-keyword-box">
          <!-- 数字键盘 -->
          <NumberKeyboard
            :keyword="peopleKeyword"
            @update:keyword="peopleKeyword = $event"
            @onInputKeyboard="onInputKeyboard"
            @onCancel="handleClearInput"
            @onConfirm="onConfirm"
            :loading="loading"
          />
        </div>
      </div>
    </div>
  </CustomDialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { CircleClose } from '@element-plus/icons-vue'
import { groupDesk } from '@/api/desktop'
import CustomDialog from '@/components/CustomDialog/Index.vue'
import NumberKeyboard from '@/components/NumberKeyboard/Index.vue'

interface Props {
  modelValue: boolean
  deskDetail?: any
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  deskDetail: null
})

const emit = defineEmits<Emits>()

// 对话框显示状态
const dialogVisible = computed({
  get: () => props.modelValue,
  set: val => {
    emit('update:modelValue', val)
    // 关闭对话框时清空输入框
    if (!val) {
      peopleKeyword.value = ''
    }
  }
})

// 人数关键字
const peopleKeyword = ref('')

// 加载状态
const loading = ref(false)

// 监听对话框显示状态
watch(
  () => dialogVisible.value,
  val => {
    if (val) {
      // 对话框打开时清空输入框
      peopleKeyword.value = ''
    }
  }
)

// 清空输入框
const handleClearInput = () => {
  peopleKeyword.value = ''
}

// 处理输入框获取焦点
const handleInputFocus = (event: FocusEvent) => {
  const input = event.target as HTMLInputElement
  input.select()
}

// 处理输入事件，只允许输入数字
const handleInput = (event: Event) => {
  const input = event.target as HTMLInputElement
  // 过滤非数字字符
  input.value = input.value.replace(/[^\d]/g, '')
  peopleKeyword.value = input.value
}

// 接收数字键盘传过来的关键词
const onInputKeyboard = (val: string) => {
  peopleKeyword.value = val
}

// 确认提交事件
const onConfirm = async () => {
  if (!peopleKeyword.value) {
    ElMessage.warning('请输入人数')
    return
  }

  if (loading.value) return // 防止重复点击

  loading.value = true

  try {
    const datas = {
      // 桌台记录id
      record_id: props.deskDetail?.recordInfo?.id,
      num: peopleKeyword.value
    }

    const res = await groupDesk(datas)
    if (res.status === 200) {
      ElMessage.success('搭台成功')
      // 关闭对话框
      dialogVisible.value = false
      // 通知父组件刷新数据
      emit('success')
      // 重置人数
      peopleKeyword.value = ''
    } else {
      ElMessage.error('搭台失败')
    }
  } catch (error) {
    console.error('搭台操作失败:', error)
    ElMessage.error('搭台失败')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.dialog-box {
  width: 590px;
  box-sizing: border-box;
}

.title {
  padding-left: 10px;
  font-size: 20px;
  font-family:
    PingFang SC,
    PingFang SC-Bold;
  font-weight: 700;
  text-align: center;
  color: #333333;
  margin-bottom: 30px;
}

.desktop-form-box {
  width: 590px;
  box-sizing: border-box;
  border-radius: 12px;

  .form-input-box {
    padding: 30px 56px;

    .form-item {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .desc {
        font-size: 18px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
      }

      .dialog-input {
        width: 422px;
        height: 48px;
        background: #ffffff;
        border: 1px solid #d2d2d2;
        border-radius: 12px;
        box-sizing: border-box;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .input {
          width: 400px;
          font-size: 14px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #333333;
          outline: none;
          border: none;
        }

        .clear-icon {
          flex-shrink: 0;
          font-size: 20px;
          color: #999;
          cursor: pointer;
        }
      }
    }
  }

  .number-keyword-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 330px;
    border-radius: 0px 0px 12px 12px;
    box-sizing: border-box;
  }
}
</style>
<style>
.share-desktop-dialog {
  max-height: unset !important;
}
</style>
